<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AppController" ng-cloak>
    <abc def>
    </abc>

    {{xx}}
</div>


<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>

<script>
    var app = angular.module('app', []);
    app.controller('AppController', function ($scope) {

    });
    app.directive('abc', function () {
        return {
            restrict: 'ACE',
            scope: {},
            controller: function ($scope) {
                console.log('abc ' + $scope.$id);
                $scope.xx = 'xx';
            },
            link: function ($scope, element, attrs) {
//                console.log('abc ' + $scope.$id);
            }
        }
    });
    app.directive('def', function () {
        return {
            restrict: 'ACE',
            controller: function ($scope) {
                console.log('def ' + $scope.$id);
                $scope.xx = 'xx';
            },
            link: function (scope, element, attrs) {
            }
        }
    });
</script>
</body>
</html>